<template>
<div class="body-container">
    <div class="fwq" v-show="fwqshow">
        <div class="header" >   
            <div class="icon-back" @click="fwq"></div>        
            <div class="title">区服选择</div>       
        </div>
        <div class="area-and-server">
            <div class="area">
                <ul>
                    <li class="area-cont" v-for="(item,index) in areaList" :key="item" @click="areasignle(item,signleareaList)" @click.prevent="cur=index" :class="{on:cur==index}"><span class="area-txt">{{item}}</span></li>
                </ul>
            </div>
            <div class="server">
                <ul><li class="server-cont" v-for="item in server1List" :key="item" v-show="cur==0"  @click="fwqsignle(item,signleFwqList)">{{item}}</li></ul>
                <ul><li class="server-cont" v-for="item in server2List" :key="item" v-show="cur==1"  @click="fwqsignle(item,signleFwqList)">{{item}}</li></ul>
                <ul><li class="server-cont" v-for="item in server3List" :key="item" v-show="cur==2"  @click="fwqsignle(item,signleFwqList)">{{item}}</li></ul>
                <ul><li class="server-cont" v-for="item in server4List" :key="item" v-show="cur==3"  @click="fwqsignle(item,signleFwqList)">{{item}}</li></ul>
                <ul><li class="server-cont" v-for="item in server5List" :key="item" v-show="cur==4"  @click="fwqsignle(item,signleFwqList)">{{item}}</li></ul>
                <ul><li class="server-cont" v-for="item in server6List" :key="item" v-show="cur==5"  @click="fwqsignle(item,signleFwqList)">{{item}}</li></ul>
                <ul><li class="server-cont" v-for="item in server7List" :key="item" v-show="cur==6"  @click="fwqsignle(item,signleFwqList)">{{item}}</li></ul>
                <ul><li class="server-cont" v-for="item in server8List" :key="item" v-show="cur==7"  @click="fwqsignle(item,signleFwqList)">{{item}}</li></ul>
                <ul><li class="server-cont" v-for="item in server9List" :key="item" v-show="cur==8"  @click="fwqsignle(item,signleFwqList)">{{item}}</li></ul>
                <ul><li class="server-cont" v-for="item in server10List" :key="item" v-show="cur==9"  @click="fwqsignle(item,signleFwqList)">{{item}}</li></ul>
                <ul><li class="server-cont" v-for="item in serversList" :key="item" v-show="cur==10"  @click="fwqsignle(item,signleFwqList)">{{item}}</li></ul>
            </div>

        </div>

    </div>
    
  <div class="part clear">
      <div class="title title-border">操作系统
          <div class="screenon">{{signleCzxtList.join()}}</div>
      </div>
      
      <div class="content">
          <ul>
              <li class="half" v-for="item of czxtList" :class="{'active':signleCzxtList.indexOf(item)>-1}" @click="choose(item,signleCzxtList)" :key="item">
                 <span class="txt">{{item}}</span>
                 <i ref="rightup" class="rightup"></i>
            </li>
        </ul>
      </div>
  </div> 
  <div class="part clear">
      <div class="title">区服
          <div class="screenon">{{signleareaList.join()}} {{signleFwqList.join()}}</div>
      </div>
      <div class="content">
          <ul>
             <li class="half" :class="{'active':signleFwqList.length==1}">
                 <span class="txt" @click="fwq">指定服务器</span>
                 <i ref="rightup" class="rightup"></i>
            </li>
             
          </ul>
      </div>
     
  </div>
  <div class="part clear">
      <div class="title">公示期
         <div class="screenon">{{signleGsqList.join()}}</div>
      </div>
      <div class="content">
          <ul>
             <li class="half" v-for="item of gsqList" :class="{'active':signleGsqList.indexOf(item)>-1}" @click="signle(item,signleGsqList)" :key="item">
                 <span class="txt">{{item}}</span>
                 <i ref="rightup" class="rightup"></i>
            </li>            
          </ul>
      </div>
  </div>
  <div class="part clear">
      <div class="title">价格（元）
          <div class="screenon">{{showPrice()}}</div>
      </div>
      <div class="content">
          <div class="val">
              <input type="tel" placeholder="请输入最低价格" class="ban" v-model="inputminprice">-
              <input type="tel" placeholder="请输入最高价格" class="ban" v-model="inputmaxprice">
          </div>
          <ul>
             <li class="three" v-for="item of jgList" :class="{'active':signleJgList.indexOf(item)>-1}" @click="signlePrice(item,signleJgList)" :key="item.min">
                 <span class="txt">{{item.price}}</span>
                 <i ref="rightup" class="rightup"></i>
            </li>
             
          </ul>
      </div>
  </div>
  <div class="part clear">
      <div class="title">等级
           <div class="screenon">{{inputlevel}}</div>
      </div>
      <div class="content">
          <ul>
              <li class="three" v-for="item of djList" :class="{'active':signleDjList.indexOf(item)>-1}" @click="signle(item,signleDjList)" :key="item.min">
                 <span class="txt">{{item.level}}</span>
                 <i ref="rightup" class="rightup"></i>
            </li>
          </ul>
      </div>
  </div>
  <div class="part clear">
      <div class="title">门派
            <div class="screenon" >{{checkedMpList.join()}}</div>
      </div>
      <div class="content">
          <ul>
             <li class="three" v-for="item in mpList" :key="item.index" :class="{'active':checkedMpList.indexOf(item)>-1}" @click="choose(item,checkedMpList)">
                 <span ref="spans" class="txt">{{item}}</span>
                 <i ref="rightup" class="rightup"></i>
            </li>             
          </ul>
      </div>
  </div>
  <div class="part clear">
      <div class="title" @click="appear">角色造型
          <div class="screenon-right" >{{signleXbList.join()}}{{checkedZxList.join()}}</div>
          <i class="arrow" v-if="isShow"> </i>
          <i class="arrowup" v-else ></i>
      </div>
      <div class="content" v-show="isShow">
          <p class="choice">性别</p>
          <ul>
             <li class="three" v-for="item of xbList" :class="{'active':signleXbList.indexOf(item)>-1}" @click="signle(item,signleXbList)" :key="item">
                 <span class="txt">{{item}}</span>
                 <i ref="rightup" class="rightup"></i>
            </li>
             
          </ul> 
          <p class="choice">造型</p>
          <ul>
             <li class="three" v-for="item in zxList" :key="item" :class="{'active':checkedZxList.indexOf(item)>-1}" @click="choose(item,checkedZxList)">
                 <span ref="spans" class="txt">{{item}}</span>
                 <i ref="rightup" class="rightup"></i>
            </li>  
          </ul>
      </div>
  </div>
  <div class="part clear">
      <div class="title" @click="appear2">评分
            <div class="screenon-right">
              {{show(pf.zhsl,"综合实力",10000,99999)}}
              {{show(pf.rwpf,"人物评分",5000,99999)}}
              {{show(pf.cwpf,"宠物评分",5000,99999)}}
              {{show(pf.zbpf,"装备评分",5000,99999)}}                                                  
            </div>
          <i class="arrow" v-if="isShow2" ></i>
          <i class="arrowup" v-else></i>
      </div>
      <div class="content" v-show="isShow2">
          <ul>
              <li class="half">
                  <div class="pf-title">综合实力</div>
                  <div class="pf-sign">≥</div>
                  <input type="tel" placeholder="1w-10w" class="point" v-model="pf.zhsl">
              </li>
              <li class="half">
                  <div class="pf-title">人物评分</div>
                  <div class="pf-sign">≥</div>
                  <input type="tel" placeholder="5k-10w" class="point" v-model="pf.rwpf">
              </li>
              <li class="half">
                  <div class="pf-title">宠物评分</div>
                  <div class="pf-sign">≥</div>
                  <input type="tel" placeholder="5k-10w" class="point" v-model="pf.cwpf">
              </li>
              <li class="half">
                  <div class="pf-title">装备评分</div>
                  <div class="pf-sign">≥</div>
                  <input type="tel" placeholder="5k-10w" class="point" v-model="pf.zbpf">
              </li>
              

          </ul>
      </div>
  </div>
  <div class="part clear">
      <div class="title" @click="appear3">角色修炼
          <div class="screenon-right">
              {{show(xl.xlzh,"修炼总和",0,200)}}
              {{show(xl.gfxl,"攻法修炼",0,25)}}
              {{show(xl.wfxl,"物防修炼",0,25)}}
              {{show(xl.ffxl,"法防修炼",0,25)}}
              {{show(xl.ffxl,"抗封修炼",0,25)}} 
              {{show(xl.ffxl,"宠物攻法",0,25)}} 
              {{show(xl.ffxl,"宠物法防",0,25)}} 
              {{show(xl.ffxl,"宠物法防",0,25)}} 
              {{show(xl.ffxl,"宠物抗封",0,25)}}                                                   
            </div>
          <i class="arrow" v-if="isShow3" ></i>
          <i class="arrowup" v-else></i>
      </div>
      <div class="content" v-show="isShow3">
          <ul>
              <li class="half">
                  <div class="pf-title">修炼总和</div>
                  <div class="pf-sign">≥</div>
                  <input type="tel" placeholder="0-200" class="point" v-model="xl.xlzh">
              </li>
              <li class="half">
                  <div class="pf-title">攻法修炼</div>
                  <div class="pf-sign">≥</div>
                  <input type="tel" placeholder="0-25" class="point" v-model="xl.gfxl">
              </li>
              <li class="half">
                  <div class="pf-title">物防修炼</div>
                  <div class="pf-sign">≥</div>
                  <input type="tel" placeholder="0-25" class="point" v-model="xl.wfxl">
              </li>
              <li class="half">
                  <div class="pf-title">法防修炼</div>
                  <div class="pf-sign">≥</div>
                  <input type="tel" placeholder="0-25" class="point" v-model="xl.ffxl">
              </li>
              <li class="half">
                  <div class="pf-title">抗封修炼</div>
                  <div class="pf-sign">≥</div>
                  <input type="tel" placeholder="0-25" class="point" v-model="xl.kfxl">
              </li>
              <li class="half">
                  <div class="pf-title">宠物攻法</div>
                  <div class="pf-sign">≥</div>
                  <input type="tel" placeholder="0-25" class="point" v-model="xl.cwgf">
              </li>
              <li class="half">
                  <div class="pf-title">宠物物防</div>
                  <div class="pf-sign">≥</div>
                  <input type="tel" placeholder="0-25" class="point" v-model="xl.cwwf">
              </li>
              <li class="half">
                  <div class="pf-title">宠物法防</div>
                  <div class="pf-sign">≥</div>
                  <input type="tel" placeholder="0-25" class="point" v-model="xl.cwff">
              </li>
              <li class="half">
                  <div class="pf-title">宠物抗封</div>
                  <div class="pf-sign">≥</div>
                  <input type="tel" placeholder="0-25" class="point" v-model="xl.cwkf">
              </li>
              

          </ul>
      </div>
  </div>
  <div class="part clear">
      <div class="title" @click="appear4">其他属性
           <div class="screenon-right">
              {{show(others.cj,"成就",0,9999)}}
              {{show(others.zjy,"总经验（亿）",0,100)}}
                                                 
            </div>
          <i class="arrow" v-if="isShow4"> </i>
          <i class="arrowup" v-else></i>
      </div>
      <div class="content" v-show="isShow4">
          <ul>
              <li class="half">
                  <div class="pf-title">成就</div>
                  <div class="pf-sign">≥</div>
                  <input type="tel" placeholder="0-9999" class="point" v-model="others.cj">
              </li>
              <li class="half">
                  <div class="pf-title">总经验（亿）</div>
                  <div class="pf-sign">≥</div>
                  <input type="tel" placeholder="0-100" class="point" v-model="others.zjy">
              </li>
              

          </ul>
      </div>
  </div>
  <div class="part clear">
      <div class="title" @click="appear5">特技
          <div class="screenon-right" >{{checkedTjList.join()}}</div>
          <i class="arrow" v-if="isShow5" ></i>
          <i class="arrowup" v-else></i>
      </div>
      <div class="content" v-show="isShow5">
          <ul>
             <li class="three" v-for="item in tjList" :key="item" :class="{'active':checkedTjList.indexOf(item)>-1}" @click="choose(item,checkedTjList)">
                 <span class="txt">{{item}}</span>
                 <i ref="rightup" class="rightup"></i>
            </li>
          </ul>
      </div>
  </div>
  <div class="part clear">
      <div class="title"  @click="appear6">特效
          <div class="screenon-right" >{{checkedTxList.join()}}</div>
          <i class="arrow" v-if="isShow6"></i>
          <i class="arrowup" v-else></i>
      </div>
      <div class="content" v-show="isShow6">
          <ul>
            <li class="three" v-for="item in txList" :key="item" :class="{'active':checkedTxList.indexOf(item)>-1}" @click="choose(item,checkedTxList)">
                 <span ref="spans" class="txt">{{item}}</span>
                 <i ref="rightup" class="rightup"></i>
            </li>         
             
          </ul>
      </div>
  </div>
<div class="bottom-container">
    <div class="left" @click="reset()">
      重置
    </div>
    <div class="right" @click="toSearch()">完成</div>
</div>

  

</div>
  
</template>
<script>
import axios from "axios";
export default {
    data(){
        return{
            cur:0,
            isShow:false,
            isShow2:false,
            isShow3:false,
            isShow4:false,
            isShow5:false,
            isShow6:false,
            active:false,
            inputminprice:'',
            inputmaxprice:'',
            inputlevel:'',
            pf:{
                zhsl:'',
                rwpf:'',
                cwpf:'',
                zbpf:''
                },
            xl:{
                xlzh:'',
                gfxl:'',
                wfxl:'',
                ffxl:'',
                kfxl:'',
                cwgf:'',
                cwwf:'',
                cwff:'',
                cwkf:''
            },
            others:{
                cj:'',
                zjy:''

            },
            fwqshow:false,
            areaList:["一区","二区","三区","四区","五区","六区","七区","八区","九区","十区","双平台"],
            server1List:["紫禁之巅","梦回唐朝","天下无双","紫气东来","开辟鸿蒙","华夏","黄金时代","群星璀璨","海纳百川","物华天宝","四海升平",
            "花好月圆","锦绣前程","鹏程万里","一帆风顺","高山流水","江山如画","八仙过海","五谷丰登","缘定三生"],
            server2List:["长安城","东海湾","长寿村","大唐国境","瑶池圣地","宝象国","西梁女国","女娲神迹","小雷音寺","麒麟山","墨家村",
            "花果山","点石成金","子母河","梦回奔日","梦回望月","身似菩提","心如明镜","慈航普度","白露为霜"],
            server3List:["飞龙在天","五虎断魂","四法青云","霜冷九州","紫电青霜","秋水落霞","狂澜碎岳","晓风残月","碧海潮生","庄周梦蝶","回风舞雪",
            "太极流光","日月乾坤","横扫千军","红袖添香","雷霆万钧","龙啸在天","含情脉脉","三味真火","杨枝甘露"],
            server4List:["烟雨江南","气贯长虹","追星踏月","平步青云","百里挑一","壮志凌云","长乐未央","天龙破城","肝胆相照","众志成城","金戈铁马",
            "龙腾虎跃","百花齐放","日新月异","功成名就","登峰造极","吉祥如意","名扬四海","十方无敌","斗转星移"],
            server5List:["钓鱼岛","长白山","沂水雪山","世界之窗","兰亭序","潇湘夜雨","吉祥谷","珍宝阁","城隍庙","逍遥津","九华山",
            "百花村","朱紫坊","齐云楼","流花湖","云梦泽","燕赵风云","钱塘江"],
            server6List:["姑苏城","西樵山","赤壁古城","太和殿","天福楼","文殊院","灵隐寺","凌云殿","彩云之南","雨花台","山海关",
            "沉香阁","紫塞明珠","金榜题名","玉龙雪山","可可西里","白鹿原","红叶谷","香蜜湖","剑门关"],
            server7List:["傲视群雄","千秋万代","气势磅礴","唯我独尊","无与伦比","九天揽月","叱咤风云","君临天下","万里挑一","顶天立地","风华正茂",
            "少年英雄","七月流火","朝气蓬勃","才华横溢","百家争鸣","浩然正气","星火燎原","仙履奇缘","天外飞仙"],
            server8List:["仗剑天涯","琴瑟和鸣","碧霞满空","威震八方","开创未来","吹角连营","云销雨霁","春风送暖","魂牵梦萦","红尘缥缈","沧海桑田",
            "势如破竹","富甲天下","红颜知己","光辉岁月","谁与争锋","一生所爱","火树银花","浮生如梦","繁花似锦"],
            server9List:["后起之秀","镜花水月","胜友如云","空谷幽兰","白驹过隙","因缘际会","大江东去","瑞雪纷飞","大唐盛世","孤帆远影","雕栏玉砌",
            "四季平安","月落乌啼","飞鸿踏雪","明眸善睐","龙飞凤舞","一鸣惊人","四海一家","八宝生辉","朝阳鸣凤"],
            server10List:["天下皆春","岁序更新","迎春纳新","喜气盈门","吉星高照","锦绣山河","一元复始","福寿康宁","繁荣昌盛","春和景明","草长莺飞",
            "莺歌燕舞","春风得意","合家团圆","锦上添花","春风和气","人间芳菲","风月无边","烟柳如画","清风自在"],
            serversList:["时空之隙","心意相通","携手逐梦","宛如初见","皓月千里","四海九州","夏日香气","相见恨晚","致青春","逍遥游","幸福群像",
            "那时花开","风样自由","对月歌","此生不换","海之彼端","三生情缘","少年无畏","一战倾城","似水年华","秋声赋","流萤灯","风之痕","落花清寒","琉璃城","雪之歌","河洛天工","两心相知","咕噜咕噜","洛阳匠心","冬日恋曲",
            "三生有幸","十年一梦","花与少年","双面伊人","愿闻花名","风起之时","2018","暖暖柔光","灿烂千阳"],
            mpList:["大唐官府","方寸山","龙宫","普陀山","阴曹地府","狮驼岭","魔王寨","化生寺","月宫","女儿村","小雷音"],
            tjList:["四海升平","慈航普渡","水清诀","玉清诀","晶清诀","笑里藏刀","野兽之力","罗汉金钟","放下屠刀",
            "破血狂攻","弱点击破","破碎无双","凝滞术","流云诀","散失咒"],
            txList:["物理暴击+1%","物理抗暴+2%","法术暴击+1%","法术抗暴+2%","封印命中+1%","抵抗封印+1%","神佑","简易","愤怒","神农","暴怒",
            "忽视物防+2%","忽视法防+2%","法术连击+2%"],
            zxList:["剑侠客","巫蛮儿","龙太子","玄彩娥","杀破狼","骨精灵","逍遥生","舞天姬","虎头怪","飞燕女","神天兵","狐美人","漠少君","巨魔王",
            "羽灵神","梦灵珑（仙族）","梦灵珑（魔族）","喵千岁"],
            xbList:["男","女"],
            gsqList:["只显示公示期","不显示公示期"],
            czxtList:["ios平台","安卓平台"],
            jgList:[
             {price:"61-499",minprice:61,maxprice:499},
             {price:"500-999",minprice:500,maxprice:999},
             {price:"1000-1999",minprice:1000,maxprice:1999},
             {price:"2000-2999",minprice:2000,maxprice:2999},
             {price:"3000-3999",minprice:3000,maxprice:3999},
             {price:"4000-4999",minprice:4000,maxprice:4999},
             {price:"5000以上",minprice:5000,maxprice:1500000}
            ],
            djList:[{level:"69级",minlevel:69,maxlevel:69,betweenlevel:"69~69"},
            {level:"70-89级",minlevel:70,maxlevel:89,betweenlevel:"70~89"},
            {level:"90-119级",minlevel:90,maxlevel:119,betweenlevel:"90~119"}],
            checkedMpList:[],
            checkedTjList:[],
            checkedTxList:[],
            checkedZxList:[],
            signleXbList:[],
            signleGsqList:[],
            signleCzxtList:[],
            signleJgList:[],
            signleDjList:[],
            signleFwqList:[],
            signleareaList:[]
        }
    },
    name:'SearchBody',
    methods:{
        appear(){
            this.isShow=!this.isShow
        },
        appear2(){
            this.isShow2=!this.isShow2
        },
        appear3(){
            this.isShow3=!this.isShow3
        },
        appear4(){
            this.isShow4=!this.isShow4
        },
        appear5(){
            this.isShow5=!this.isShow5
        },
        appear6(){
            this.isShow6=!this.isShow6
        },

        //多选
        choose(item, checkedList){
            let arrIndex=checkedList.indexOf(item);
            if(arrIndex>-1){
           checkedList.splice(arrIndex,1)
            }else{      
           checkedList.push(item)   
           
            }
               
        },
        //单选
        signle(item, signleList){
            let arrIndex=signleList.indexOf(item);
            signleList.splice(0,signleList.length);
            if(arrIndex==-1){
                signleList.push(item);  
                   this.inputlevel=item.betweenlevel;         
            }

        },
        signlePrice(item, signleList){
            let arrIndex=signleList.indexOf(item);
            signleList.splice(0,signleList.length);
            this.inputminprice='';
            this.inputmaxprice='';
            if(arrIndex==-1){
                signleList.push(item);   
                this.inputminprice=item.minprice;  
                this.inputmaxprice=item.maxprice;     
            }
        },
        show(point,name,midValue,maxValue){
            if(point>maxValue)
            {
                this.point=maxValue;
            }
            if(point<=0){
                return  ''
            }else if(point<=midValue){
                return  name+'≥'+midValue
            }else if(point<maxValue){
                return  name+'≥'+point
            }else{
                return  name+'≥'+maxValue
            }
        },
        showPrice(){
            if(this.inputminprice||this.inputmaxprice){
            return this.inputminprice+'~'+this.inputmaxprice
            }else{
                return ''
            }

        },
        fwq(){
            if(this.signleFwqList.length==1){
                this.signleFwqList.splice(0,this.signleFwqList.length);
                this.signleareaList.splice(0,this.signleareaList.length);
            }else{
                this.fwqshow=!this.fwqshow
            }
        },
        fwqsignle(item, signleList){
            let arrIndex=signleList.indexOf(item);
            signleList.splice(0,signleList.length);
            if(arrIndex==-1){
                signleList.push(item);                 
            }
             this.fwqshow=false;   
        } ,
        areasignle(item, signleList){
            
            let arrIndex=signleList.indexOf(item);
            signleList.splice(0,signleList.length);
            if(arrIndex==-1){
                signleList.push(item);   
                    
            }

        },
        search(){
                var param={type:"qbjs"};

                //操作系统
                if(this.signleCzxtList&&this.signleCzxtList.length>0){
                    var czxt=[];
                    for(var i=0;i<this.signleCzxtList.length;i++){
                        if(this.signleCzxtList[i]=="ios平台"){
                            czxt.push("ios");
                        }
                        else if(this.signleCzxtList[i]=="安卓平台"){
                            czxt.push("android");
                        }
                    }
                    param.czxq=czxt;
                }
                //等级
                if(this.signleDjList&&this.signleDjList.length>0){
                    param.zddj=parseInt(this.signleDjList[0].minlevel) ;
                    param.zgdj=parseInt(this.signleDjList[0].maxlevel);
                }
                //价格
                if(this.inputmaxprice){
                     param.zgjg=parseInt(this.inputmaxprice);
                }
                if(this.inputminprice){
                     param.zdjg=parseInt(this.inputminprice);
                }
                //服务器
                if(this.signleFwqList){
                    param.xq=this.signleFwqList[0]
                }
                //公示期
                if(this.signleGsqList){
                    if(this.signleGsqList[0]=="只显示公示期"){
                        param.gsq="1";
                    }
                    else if(this.signleGsqList[0]=="不显示公示期"){
                        param.gsq="2";
                    }
                }
                //门派
                if(this.checkedMpList&&this.checkedMpList.length>0){
                    var mp=[];
                    for(var i=0;i<this.checkedMpList.length;i++){
                        if(this.checkedMpList[i]=="大唐官府"){
                            mp.push("大唐官府");
                        }
                        else if(this.checkedMpList[i]=="方寸山"){
                            mp.push("方寸山");
                        }
                        else if(this.checkedMpList[i]=="龙宫"){
                            mp.push("龙宫");
                        }
                        else if(this.checkedMpList[i]=="普陀山"){
                            mp.push("普陀山");
                        }
                        else if(this.checkedMpList[i]=="阴曹地府"){
                            mp.push("阴曹地府");
                        }
                        else if(this.checkedMpList[i]=="狮驼岭"){
                            mp.push("狮驼岭");
                        }
                        else if(this.checkedMpList[i]=="魔王寨"){
                            mp.push("魔王寨");
                        }
                        else if(this.checkedMpList[i]=="化生寺"){
                            mp.push("化生寺");
                        }
                        else if(this.checkedMpList[i]=="月宫"){
                            mp.push("月宫");
                        }
                        else if(this.checkedMpList[i]=="女儿村"){
                            mp.push("女儿村");
                        }
                        else if(this.checkedMpList[i]=="小雷音"){
                            mp.push("小雷音");
                        }
                    }
                    param.mp=mp;
                }
                //角色造型
                if(this.checkedZxList&&this.checkedZxList.length>0){
                    var zx=[];
                    for(var i=0;i<this.checkedZxList.length;i++){
                        if(this.checkedZxList[i]=="剑侠客"){
                            zx.push("剑侠客");
                        }
                        else if(this.checkedZxList[i]=="巫蛮儿"){
                            zx.push("巫蛮儿");
                        }
                        else if(this.checkedZxList[i]=="龙太子"){
                            zx.push("龙太子");
                        }
                        else if(this.checkedZxList[i]=="玄彩娥"){
                            zx.push("玄彩娥");
                        }
                        else if(this.checkedZxList[i]=="杀破狼"){
                            zx.push("杀破狼");
                        }
                        else if(this.checkedZxList[i]=="骨精灵"){
                            zx.push("骨精灵");
                        }
                        else if(this.checkedZxList[i]=="逍遥生"){
                            zx.push("逍遥生");
                        }
                        else if(this.checkedZxList[i]=="舞天姬"){
                            zx.push("舞天姬");
                        }
                        else if(this.checkedZxList[i]=="虎头怪"){
                            zx.push("虎头怪");
                        }
                        else if(this.checkedZxList[i]=="飞燕女"){
                            zx.push("飞燕女");
                        }

                        else if(this.checkedZxList[i]=="神天兵"){
                            zx.push("神天兵");
                        }
                        else if(this.checkedZxList[i]=="狐美人"){
                            zx.push("狐美人");
                        }else if(this.checkedZxList[i]=="漠少君"){
                            zx.push("漠少君");
                        }
                        else if(this.checkedZxList[i]=="巨魔王"){
                            zx.push("巨魔王");
                        }
                        else if(this.checkedZxList[i]=="羽灵神"){
                            zx.push("羽灵神");
                        }
                        else if(this.checkedZxList[i]=="梦灵珑（仙族）"){
                            zx.push("梦灵珑（仙族）");
                        }
                        else if(this.checkedZxList[i]=="梦灵珑（魔族）"){
                            zx.push("梦灵珑（魔族）");
                        }
                        else if(this.checkedZxList[i]=="喵千岁"){
                            zx.push("喵千岁");
                        }

                    }
                    param.zx=zx;
                }
                //性别
                if(this.signleXbList){
                    param.xb=this.signleXbList[0]
                }
                //评分
                if(this.pf.zhsl){
                    param.zhsl=parseInt(this.pf.zhsl);
                }
                if(this.pf.rwpf){
                    param.rwpf=parseInt(this.pf.rwpf);
                }
                if(this.pf.cwpf){
                    param.cwpf=parseInt(this.pf.cwpf);
                }
                if(this.pf.zbpf){
                    param.zbpf=parseInt(this.pf.zbpf);
                }
                //修炼
                if(this.xl.xlzh){
                    param.xlzh=parseInt(this.xl.xlzh);
                }
                if(this.xl.gfxl){
                    param.gfxl=parseInt(this.xl.gfxl);
                }
                if(this.xl.wfxl){
                    param.wfxl=parseInt(this.xl.wfxl);
                }
                if(this.xl.ffxl){
                    param.ffxl=parseInt(this.xl.ffxl);
                }
                if(this.xl.kfxl){
                    param.kfxl=parseInt(this.xl.kfxl);
                }
                if(this.xl.cwgf){
                    param.cwgf=parseInt(this.xl.cwgf);
                }
                if(this.xl.cwwf){
                    param.cwwf=parseInt(this.xl.cwwf);
                }
                if(this.xl.cwff){
                    param.ffxl=parseInt(this.xl.cwff);
                }
                if(this.xl.cwkf){
                    param.ffxl=parseInt(this.xl.cwkf);
                }
                //其它属性
                if(this.others.cj){
                    param.cj=parseInt(this.others.cj);
                }
                if(this.others.zjy){
                    param.zjy=parseInt(this.others.zjy);
                }
                param.orderby="rq";
                return param;
        },
        toSearch(){
           var param=this.search();
            this.$router.push({
                name: 'List',
                params: param
            })
        },
        reset(){
            this.signleCzxtList.splice(0,this.signleCzxtList.length);
            this.signleDjList.splice(0,this.signleDjList.length);
            this.signleFwqList.splice(0,this.signleFwqList.length);  
            this.signleareaList.splice(0,this.signleareaList.length); 
            this.signleGsqList.splice(0,this.signleGsqList.length);
            this.checkedMpList.splice(0,this.checkedMpList.length);
            this.checkedZxList.splice(0,this.checkedZxList.length);  
            this.signleXbList.splice(0,this.signleXbList.length);              
            this.pf.zhsl='',
            this.pf.rwpf='',
            this.pf.cwpf='',
            this.pf.zbpf='',           
            this.inputmaxprice='',
            this.inputminprice=''
            this.xl.xlzh='',
            this.xl.gfxl='',
            this.xl.wfxl='',
            this.xl.ffxl='',
            this.xl.kfxl='',
            this.xl.cwgf='',
            this.xl.cwwf='',
            this.xl.cwff='',
            this.xl.cwkf='',
            this.others.cj='',
            this.others.zjy=''

        }
    }
    
}
</script>
<style  lang="scss" scoped>
.header {
    position: fixed;
    top: 0;
    z-index: 1;
    width: 100%;
    height: rem(130);
    min-width: 320px;
    max-width: 750px;
    background-color: #fff;
    border-bottom: 1px solid #f5f5f5;
    .title{
        width: 100%;
        height: rem(130);
        line-height: rem(130);
        text-align: center;
        font-size: rem(45);
        font-weight: 700;
    }    
    
    .icon-back{
        position: absolute;
        top: rem(40);
        left: rem(40);
        width: rem(60);
        height: rem(60);
        background: url(../../../assets/imgs/back.svg) no-repeat 50% 50%;
        background-size: auto 100%;
        cursor: pointer;
    }
}
.body-container{
    margin-top: rem(130);
    margin-bottom: rem(150);
    background-color: #fff;
    .part{
        width: 100%;
        padding: rem(20) rem(30);    
        .title-border{
                border-top:0;

            }    
        .title{
            position: relative;
            width: 100%;
            height: rem(80);
            font-size: rem(42);
            font-weight: 700;
            border-top: 1px solid #f5f5f5;
            padding-top: rem(30); 
            padding-bottom: rem(30); 
            
            .screenon{
                position: absolute;
                top: rem(30);
                right: rem(30);
                width: 60%;
                height: rem(80);
                font-size: rem(42);
                font-weight: 400;
                overflow: hidden;
                text-overflow: ellipsis;
                text-align: right;
                white-space: nowrap
            } 
            .screenon-right{
                position: absolute;
                top: rem(30);
                right: rem(80);
                width: 60%;
                height: rem(80);
                font-size: rem(42);
                font-weight: 400;
                overflow: hidden;
                text-overflow: ellipsis;
                text-align: right;
                white-space: nowrap
            }
            .arrow{
                position: absolute;
                width: rem(45);
                height:rem(45);
                top: rem(30);
                right: rem(30);
                background: url(../../../assets/imgs/toright.svg) no-repeat 50% 50%;
                background-size: 100% 100%;
                    transform: rotate(270deg);
            }
            .arrowup{
                position: absolute;
                width: rem(45);
                height:rem(45);
                top: rem(30);
                right: rem(30);
                background: url(../../../assets/imgs/toright.svg) no-repeat 50% 50%;
                background-size: 100% 100%;
                    transform: rotate(90deg);

            }
                          
        }
        .content{           
            width: 100%;   
            padding-top: rem(40); 
            .val{
                display: flex;
                width: 100%;
                height: rem(120);
                line-height: rem(120);
                margin-bottom: rem(30);
                color: #f5f5f5;
                .ban{
                    flex: 1;
                    width: 48%;
                    height: rem(60);
                    font-size: rem(40);
                    padding: rem(25);
                    border-radius: rem(15);
                    border: 1px solid #ccc;
                    outline:none;
                    
                }
                input::-webkit-input-placeholder{
                     color: #CCC;
                }
            }

            .choice{
                font-size: rem(42);
                margin:rem(-20) 0 rem(20) 0;
                color: #1e1e1e;
            }       
            .choice::before{
                content: "";
                display: inline-block;
                vertical-align: middle;
                width: rem(15);
                height: rem(15);
                margin-right: rem(20);
                background: #bbb;
                -webkit-border-radius: 50%;
                -moz-border-radius: 50%;
                border-radius: 50%;
            } 
            ul{
                width: 100%;
                display: flex;
                flex-wrap: wrap;            
            align-content: flex-start; 
             align-content: center; 
            align-content: space-between; 
            align-content: space-around;     
                .active{
            color:#e74e4b;
    .txt{
       background-color:#fff; 
       border: 1px solid #e74e4b;
    }
    .rightup{
        width: rem(60);
        height: rem(40);
        position: absolute;
        top: 0;
        right: rem(-5);
        background: url(../../../assets/imgs/rightup.svg) no-repeat 50% 50%;
        background-size: 100% 100%;
        border-radius:0 rem(15) 0 0 ;
    }
}                  
                li{
                    position: relative;
                    float: left;
                    height: rem(120);
                    line-height: rem(120);
                    margin-bottom: rem(30);

                    .txt{
                        display: block;
                        width: 100%;
                        background-color: #f5f5f5;
                        border: 1px solid #f5f5f5;
                        height: rem(120);
                        line-height: rem(120);
                        border-radius: rem(15);
                        text-align: center;
                        font-size: rem(42);
                    
                    }
                    
                }
                .half:nth-child(2n){
                margin-left: 2%;
                }
                .half{
                    width: 49%;
                    display: flex;
                    .pf-title{
                        flex: 1;
                        font-size: rem(40);

                    }
                    .pf-sign{
                        width: rem(40);
                        font-size: rem(40);
                    }
                    .point{
                      width: rem(180);
                      height: rem(60);
                      padding: rem(25);
                      border-radius: rem(15);
                    border: 1px solid #ccc;
                    outline:none;
                    font-size: rem(40);
                    }
                    .point::-webkit-input-placeholder{
                        color: #ccc;
                    }
                }
                .three:nth-child(3n+1),
                .three:nth-child(3n+2){
                margin-right: 2%;
                }
                .three{
                    width: 32%;
                }
            }
            

        }
    }
}
.clear{clear:both;}
.fwq{ 
    position: fixed;
    top: 0;
    width: 100%;
    min-width: 320px;
    max-width: 750px;
    height: 100%;
    background-color: #fff;
    z-index: 99999;
    .area-and-server{
        margin-top: rem(130);
        margin-bottom: rem(130);
        width: 100%;
         height: 100%;
        .area{
            float: left;
            width: 40%;
            height: rem(1200);
            overflow-y: auto;
            .area-cont{
                width: 100%;
                height: rem(130);
                line-height: rem(130);
                font-size: rem(42);
                .area-txt{
                    width: auto;
                    margin-left: rem(40);
                }
           

            }
            .on{
                background-color: #f5f5f5;
                color: #e74e4b;
            }
        }
        .server{
            float: left;
            width: 60%;
            height: rem(1200);
          
            padding: 0 rem(30);
            overflow:auto;
            .server-cont{
                width: 100%;
                height: rem(130);
                line-height: rem(130);
                font-size: rem(42);
                border-top: 1px solid #f5f5f5;
            }

        }
    }
}
.bottom-container{
    position: fixed;
    bottom: 0;
    z-index: 2;
    width: 100%;
    height: rem(140);
    min-width: 320px;
    max-width: 750px;
    .left{
        float: left;
        width: 50%;
        height: 100%;
         line-height: 3;
         font-size: rem(45);
        text-align: center;
        background-color: #fff;
        border-top: 1px solid #f5f5f5;

        
    }
    .right{
        float: left;
        width: 50%;
        height: 100%;
        line-height: 3;
        background-color: #e74e4b;
        font-size: rem(45);
        color: #fff;
        text-align: center;
    }
}
</style>